<template>
    <div class="container">
        <Breadcrumb :items="['menu.list', '系统设置']" />
        <a-card class="general-card" title="系统设置">
            <a-row>
                <a-col>
                    <a-form :model="formData" label-align="left" auto-label-width>
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="选择类型">
                                    <a-select :style="{ width: '100%' }" v-model="formData.deviceType"
                                        placeholder="请选择">
                                        <a-option :value="2">电吹风 </a-option>
                                        <a-option :value="1">插座</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="18">
                                <div class="search-btn">
                                    <a-button style="background: #3E3E69;color: #FFFFFF;" @click="onPageChange(1)">查询</a-button>
                                    <a-button type="primary" @click="openPage('新增')">新增</a-button>
                                    <a-button type="primary" status="warning" @click="openzy('注意事项')">注意事项</a-button>
                                    <!-- <a-button status="warning" @click="openzy('公告')">公告</a-button> -->
                                </div>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>

        <div class="container-table">
            <a-card class="general-card">
                <!-- :scroll="{ x: 270 }" -->
                <a-table :virtual-list-props="{ height: 460 }" :loading="loading" :columns="columns" :data="tableList"
                    :pagination="pagination" @page-change="onPageChange">
                    <template #deviceType="{ record }">
                        {{ record.deviceType == 1 ? '插板' : '吹风机' }}
                    </template>
                    <template #operations="{ record }">
                        <a-button type="text" size="small" @click="openPage('编辑', record)">
                            编辑
                        </a-button>

                        <a-popconfirm content="确认是否删除?" type="warning" @ok="deleteOneOrder(record.id)">
                            <a-button type="text" status="danger" size="small">
                                删除
                            </a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </a-card>
        </div>


        <a-modal v-model:visible="isShowEdit">
            <template #title>
                {{ isShowEditNaame }}
            </template>
            <div>
                <a-spin class="w-full" :loading="loadingEdit" tip="创建中...">
                    <a-form ref="formRef" :model="form" layout="vertical">
                        <a-form-item :rules="[{ required: true, message: '类型必填' }]" field="deviceType" label="选择类型">
                            <a-select :style="{ width: '100%' }" v-model="form.deviceType" placeholder="请选择">
                                <a-option :value="2">电吹风 </a-option>
                                <a-option :value="1">插座</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item :rules="[{ required: true, message: '收费时长必填' }]" field="minutes" label="收费时长(分钟)">
                            <a-input-number :min="0" v-model="form.minutes" placeholder="请输入" />
                        </a-form-item>
                        <a-form-item :rules="[{ required: true, message: '收费价格必填' }]" field="fee" label="收费价格(元)">
                            <a-input-number :min="0" :precision="2" v-model="form.fee" placeholder="请输入" />
                        </a-form-item>

                    </a-form>
                </a-spin>
            </div>

            <template #footer>
                <a-button type="primary" @click="handleOk">提交</a-button>
            </template>
        </a-modal>


        <a-modal v-model:visible="iszy">
            <template #title>
                注意事项
            </template>
            <div style="border: 1px solid #ccc" :loading="zyLoding">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                    :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                    :mode="mode" @onCreated="handleCreated" />
            </div>

            <template #footer>
                <a-button type="primary" @click="saveiszy">保存</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, shallowRef } from 'vue'
import { Message, Modal } from '@arco-design/web-vue';

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import { announcementsfindAll, announcementsadd, announcementsupdate, quickdurationsfindAll, quickdurationsadd, quick_urationsid, quick_durationsupdate, quick_durationsdelete } from '@/api/hairdryer'


const formModel = ref({});

let loading = ref(false);
//传给后端的数据
let formData = ref({
    page: 1,
    size: 10
})
const pagination = ref({
    current: formData.value.page,
    pageSize: formData.value.size,
    showTotal: true,
    total: 0
}); // 分页属性
const columns = ref([
    {
        title: '类型',
        dataIndex: 'deviceType',
        slotName: 'deviceType',
    },
    {
        title: '收费时长(分钟)',
        dataIndex: 'minutes',
    },
    {
        title: '收费价格(元)',
        dataIndex: 'fee',
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'operations',
        slotName: 'operations',
    },

])
const tableList = ref([]);

const onPageChange = (current) => {
formData.value.page = current;
    pagination.value.current = current;
    getquickdurationsfindAll()
};

//获取列表
const getquickdurationsfindAll = async () => {
    loading.value = true;
    try {
        let res = await quickdurationsfindAll(formData.value);
        tableList.value = res.data.content

        pagination.value.total = res.data.totalElements;
        loading.value = false;

    } catch (error) {
        loading.value = false;

    }
}


//新增
let isShowEdit = ref(false);
let isShowEditNaame = ref('新增')
const loadingEdit = ref(false);
const formRef = ref()
//传入后端数据
let form = ref({
})

//打开新增或者编辑
const openPage = async (name, data) => {
    isShowEditNaame.value = name
    isShowEdit.value = true;
    form.value ={}

    if (isShowEditNaame.value == '编辑') {
        try {
            let res = await quick_urationsid(data.id)
            form.value = res.data
        } catch (error) {

        }
    }
}
const handleOk = async () => {

    let rs = await formRef.value.validate();
    if (rs) return
    // let params = Object.assign({}, form)
    if (isShowEditNaame.value == '新增') {
        setquickdurationsadd()

    }
    if (isShowEditNaame.value == '编辑') {
        setquick_durationsupdate()
    }


}

//新增规则
const setquickdurationsadd = async () => {
    loadingEdit.value = true

    try {
        let res = await quickdurationsadd(form.value)
        Message.success('新增成功')
        loadingEdit.value = false
        getquickdurationsfindAll() //获取列表
        isShowEdit.value = false
    } catch (error) {
        loadingEdit.value = false
        Message.error('新增失败！')

    }
}

//编辑规则
const setquick_durationsupdate = async () => {
    try {
        let res = await quick_durationsupdate(form.value.id, form.value)
        Message.success('编辑成功')
        loadingEdit.value = false
        getquickdurationsfindAll() //获取列表
        isShowEdit.value = false
    } catch (error) {
        loadingEdit.value = false
        Message.error('编辑失败！')

    }
}

//删除规则
const deleteOneOrder = async (id) => {
    try {
        let res = await quick_durationsdelete(id, {})
        Message.success('删除成功')
        getquickdurationsfindAll() //获取列表
    } catch (error) {
        Message.error('删除失败！')

    }
}




//注意事项
let iszy = ref(false)
const toolbarConfig = {
    toolbarKeys: [
        "bold", // 字体加粗
        "underline", // 字体下划线
        "italic", // 字体斜体
        "through", // 字体删除线
        "code", // 字体代码
        "sub", // 下标 "sup", // 上标
        "clearStyle", // 清除字体样式
        "color", // 字体颜色
        "bgColor", // 背景颜色
        "fontSize", // 字体大小
        "fontFamily", // 字体
    ]

}
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
let mode = ref('default')
const editorConfig = { placeholder: '请输入内容...' }
// 内容 HTML
const valueHtml = ref('')
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

//新增注意事项
const setannouncementsadd = async () => {
    try {
        let res = await announcementsadd({ content: valueHtml.value, enabled:true })
        getannouncementsfindAll() // 获取列表
    } catch (error) { }
}

//编辑注意事项
const putannouncementsupdate = async () => {
    try {
        let res = await announcementsupdate(zyList.value.id, { content: valueHtml.value })
        getannouncementsfindAll() // 获取列表
        Message.success('编辑成功')
        iszy.value = false //关闭弹窗
    } catch (error) { }

}

//打开注意事项
let zyLoding = ref(false)
let zyName = ref('')
const openzy = (name) => {
    zyName.value = name
    if (name == "注意事项") {
        getannouncementsfindAll() //获取注意事项

    }

    if (name == "公告") {

    }
    iszy.value = true
}

//保存注意事项
const saveiszy = () => {
    //如果注意事项无数据 则新增
    if (zyName.value == "注意事项") {
        if (zyList.value.id) {
            //编辑
            putannouncementsupdate()
        } else {
            //新增
            setannouncementsadd()

        }
    }
}




//获取注意事项列表只有一个
let zyList = ref({})
const getannouncementsfindAll = async () => {
    try {
        zyLoding.value = true
        let res = await announcementsfindAll({
            page: 1,
            size: 1
        })
        //如果获取到数据
        console.log(res,'wewr');
        
        zyList.value = res.data
         valueHtml.value = zyList.value.content


        // if (zyList.value.length > 0) {
        //     // valueHtml.value = zyList.value[0].content
        //     valueHtml.value = zyList.value[0].content
        // }

        zyLoding.value = false


    } catch (error) {
        zyLoding.value = false

    }

}
onMounted(() => {
    getquickdurationsfindAll() //获取列表
})

</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;

    .search-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0 10px;
    }


    .container-table {
        margin-top: 20px;

        .general-card {
            box-sizing: border-box;
            padding: 20px 0;
        }
    }
}
</style>
